/*前缀不可为空*/
$class-prefix: '--srt';

:root {
    // 全局背景颜色
    --main-bg-color: #f8f8f8;
    // 全局字体颜色
    --main-text-color: #222222;
    // 全局高亮字体颜色（如 a标签，可点击）
    --main-active-text-color: #0084f6;

    // 页脚背景色
    --footer-bg-color: #3d3d49;
    // 页脚文字颜色
    --footer-text-color: #c8c7d1;

    // 默认按钮背景颜色
    --button-bg-color: transparent;
    // 默认按钮文字颜色
    --button-text-color: #0289ff;
    // 默认按钮边框颜色
    --button-border-color: #0289ff;
    // 按钮悬浮或者点击时的背景色
    --button-hover-bg-color: #e7f1ff;
    // 按钮悬浮或者点击时的文本
    --button-hover-text-color: #0289ff;
    // 按钮悬浮或者点击时的边框颜色
    --button-hover-border-color: #0289ff;
    // 按钮禁用时的背景色
    --button-disabled-bg-color: #ffffff;
    // 按钮禁用时的文字颜色
    --button-disabled-text-color: #b2dafc;
    // 按钮禁用时的边框颜色
    --button-disabled-border-color: #b2dafc;
    // 按钮只有文字时的颜色
    --button-link-color: #0289ff;
     // 按钮只有文字时的hover颜色
     --button-link-hover-color: #337ecc;

    // type=primary时 按钮的背景色
    --button-primary-bg-color: #0084f6;
    // type=primary时 按钮的文字颜色
    --button-primary-text-color: #ffffff;
    // type=primary时 按钮的边框颜色
    --button-primary-border-color: #0084f6;
    // type=primary时 按钮悬浮或者按下时的背景色
    --button-primary-hover-bg-color: #0176f6;
    // type=primary时 按钮悬浮或者按下时的文字颜色
    --button-primary-hover-text-color: #ffffff;
    // type=primary时 按钮悬浮或者按下时的边框颜色
    --button-primary-hover-border-color: #0176f6;
    // type=primary时 禁用时的背景色
    --button-disabled-primary-bg-color: #b2dafc;
    // type=primary时 禁用时的文字颜色
    --button-disabled-primary-text-color: #ffffff;
    // type=primary时 禁用时的边框颜色
    --button-disabled-primary-border-color: #b2dafc;
    // type=primary时 按钮只有文字时的颜色
    --button-primary-link-color: #222222;

    // type=info时 按钮的背景颜色
    --button-info-bg-color: #eff0f2;
    // type=info时 按钮的文字颜色
    --button-info-text-color: #222222;
    // type=info时 按钮的边框颜色
    --button-info-border-color: #eff0f2;
    // type=info时 按钮悬浮或者按下时的背景颜色
    --button-info-hover-bg-color: #eff0f2;
    // type=info时 按钮悬浮或者按下时的文字颜色
    --button-info-hover-text-color: #0289ff;
    // type=info时 按钮悬浮或者按下时的边框颜色
    --button-info-hover-border-color: #eff0f2;
    // type=info时 按钮禁用时的背景颜色
    --button-disabled-info-bg-color: #eff0f2;
    // type=info时 按钮禁用时的文本颜色
    --button-disabled-info-text-color: #999999;
    // type=info时 按钮禁用时的边框颜色
    --button-disabled-info-border-color: #eff0f2;
    // type=info时 按钮只有文字时的颜色
    --button-info-link-color: #222222;
    // 取消按钮  按钮的边框颜色
    --button-cancel-border-color: #e0e2e4;
    // 取消按钮  按钮悬浮或者按下时的文字颜色
    --button-cancel-hover-color: #0289ff;
    // 取消按钮  按钮悬浮或者按下时的边框颜色
    --button-cancel-hover-border-color: #b2dafc;
    // 取消按钮  按钮禁用时的文字颜色
    --button-cancel-disabled-color: #999999;
    // 取消按钮  按钮文字颜色
    --button-cancel-color: #666666;

    // 表格头部背景颜色
    --table-header-bg-color: #f7f9fa;
    // 表格头部文字颜色
    --table-header-text-color: #666666;
    // 表格体背景颜色
    --table-body-bg-color: #ffffff;
    // 表格体文字颜色
    --table-body-text-color: #222222;
    // 表格行斑马纹背景色
    --table-stripe-bg-color: #f7f9fa;
    // 表格行斑马纹文字颜色
    --table-stripe-text-color: #222222;

    // 下拉框文字颜色
    --select-text-color: #222222;
    // 下拉框边框颜色
    --select-border-color: #CCCCCC;
    // 下拉框划过边框颜色
    --select-hover-border-color: #0289ff;
    // 下拉内容悬浮背景颜色
    --select-content-hover-bg-color: #e7f1ff;
    // 下拉内容禁用背景颜色
    --select-disabled-bg-color: #f8f8f8;
    // 下拉多选背景色
    --select-tag-bg-color: #ECEFF4;
    // 下拉多选字体颜色
    --select-tag-text-color: #535A73;


    // 输入框颜色
    --input-border-color: #CCCCCC;
    // 输入框禁用背景颜色
    --input-disabled-bg-color: #f8f8f8;
    // 输入框文字颜色
    --input-text-color: #222222;
    // 输入框聚焦时边框颜色
    --input-focus-border-color: #0289ff;
    // 输入框错误颜色
    --input-error-color: #ff4719;
    --input-placeholder :#999999;

    // 面包屑默认颜色
    --breadcrumb-text-color: #222222;
    // 面包屑没有路由的文字颜色
    --breadcrumb-disabled-text-color: #47698c;
    // 面包屑悬浮点击颜色
    --breadcrumb-hover-text-color: #0289ff;

    // 分页默认背景色
    --pagination-bg-color: #f8f8f8;
    // 分页默认文字颜色
    --pagination-text-color: #222222;
    // 分页悬停背景色
    --pagination-hover-bg-color: #e7f1ff;
    // 分页选中背景色
    --pagination-active-bg-color: #0084f6;
    // 分页选中文字颜色
    --pagination-active-text-color: #ffffff;
    // 分页切换页面icon悬浮颜色
    --pagination-switch-hover-color: #0084f6;
       // 单选框选中边框颜色
     --radio-active-border-color: #028aff;

    // 复选框默认边框颜色
    --checkbox-border-color: #028aff;
    // 复选框选中边框和背景颜色
    --checkbox-active-border-bg-color: #028aff;
    // 复选框选中不能再选边框和背景颜色
    --checkbox-active-disabled-border-bg-color: #b2dafc;
    // 复选框禁用边框颜色
    --checkbox-disabled-border-color: #e0e2e4;
    // 复选框禁用背景颜色
    --checkbox-disabled-bg-color: #f8f8f8;
    // 复选框禁用文字颜色
    --checkbox-disabled-text-color: #cccccc;
     // 复选框文字颜色
     --checkbox-text-color: #222222;

    // 主要颜色
    --color-primary: #0084f6;
    // 成功颜色
    --color-success: #00b042;
    // 警告颜色
    --color-warning: #ff9201;
    // 错误颜色
    --color-danger: #ff4719;
    // 消息颜色
    --color-info: #47698c;

    // 黑色
    --color-black: #000000;
    // 浅黑色
    --color-light-black: #222222;
    // 灰色
    --color-gray: #666666;
    // 浅灰色
    --color-light-gray: #999999;
    // 灰色辅助色1 例如搜索框默认
    --color-gray-auxiliary1: #cccccc;
    // 灰色辅助色2 例如辅助灰色1（例：菜单、按钮、背景，分割线，边框线
    --color-gray-auxiliary2: #eff0f2;
    // 辅助灰色3（例：分割线、边框线
    --color-gray-auxiliary3: #e0e2e4;
    // 辅助灰色4 （部分背景色
    --color-gray-auxiliary4: #f7f9fA;
    // 辅助蓝色1
    --color-blue-auxiliary1: #e7f1ff;
    // 辅助蓝色2 此色仅用于睿云首页主导航！
    --color-blue-auxiliary2: #0176f6;
    // 白色
    --color-white: #ffffff;

    // group-card-hover-border-c
    --border-hover-border-color: #66B5FA;
    ///////// 增加的颜色

    // 首页导航渐变色头部颜色
    --nav-top-bg-color: #228340;
    // 首页导航渐变色底部颜色
    --nav-bottom-bg-color: #4AB02F;
    // 首页导航选中颜色
    --nav-bg-active-color: rgba(255,255,255,0.18);
    // 首页导航下拉导航选中颜色
    --nav-sub-bg-active-color: #A1FF9F;
    // 首页导航下拉导航背景颜色
    --nav-sub-bg-more-color: rgba(33, 119, 40, 0.84);
    // 首页主色
    --home-main-color: #279731;


    // 主页导航主色
    --nav-main-color: #000000;
    // 主页导航选中主色
    --nav-main-active-color: #000000;
    // 主页更多下拉导航背景主色
    --nav-main-sub-bg-more-color:rgba(255, 255, 255, 0.92);
    // 主页更多下拉导航文字主色
    --nav-main-sub-color: #222222;
    // 主页更多下拉导航文字hover主色
    --nav-main-sub-hover-color: #279731;


    #{$class-prefix}: {
        main-bg-color: var(--main-bg-color);
        main-text-color: var(--main-text-color);
        main-active-text-color: var(--main-active-text-color);
        footer-bg-color: var(--footer-bg-color);
        footer-text-color: var(--footer-text-color);
        button-bg-color: var(--button-bg-color);
        button-text-color: var(--button-text-color);
        button-border-color: var(--button-border-color);
        button-hover-bg-color: var(--button-hover-bg-color);
        button-hover-text-color: var(--button-hover-text-color);
        button-hover-border-color: var(--button-hover-border-color);
        table-header-bg-color: var(--table-header-bg-color);
        button-disabled-bg-color: var(--button-disabled-bg-color);
        button-disabled-text-color: var(--button-disabled-text-color);
        button-disabled-border-color: var(--button-disabled-border-color);
        button-link-color: var(--button-link-color);
        button-primary-bg-color: var(--button-primary-bg-color);
        button-primary-text-color: var(--button-primary-text-color);
        button-primary-border-color: var(--button-primary-border-color);
        button-primary-hover-bg-color: var(--button-primary-hover-bg-color);
        button-primary-hover-text-color: var(--button-primary-hover-text-color);
        button-primary-hover-border-color: var(--button-primary-hover-border-color);
        button-disabled-primary-bg-color: var(--button-disabled-primary-bg-color);
        button-disabled-primary-text-color: var(--button-disabled-primary-text-color);
        button-disabled-primary-border-color: var(--button-disabled-primary-border-color);
        button-info-bg-color: var(--button-info-bg-color);
        button-info-text-color: var(--button-info-text-color);
        button-info-border-color: var(--button-info-border-color);
        button-info-hover-bg-color: var(--button-info-hover-bg-color);
        button-info-hover-text-color: var(--button-info-hover-text-color);
        button-info-hover-border-color: var(--button-info-hover-border-color);
        button-disabled-info-bg-color: var(--button-disabled-info-bg-color);
        button-disabled-info-text-color: var(--button-disabled-info-text-color);
        button-disabled-info-border-color: var(--button-disabled-info-border-color);
        button-info-link-color: var(--button-info-link-color);
        button-primary-link-color: var(--button-primary-link-color);
        table-header-text-color: var(--table-header-text-color);
        table-body-bg-color: var(--table-body-bg-color);
        table-body-text-color: var(--table-body-text-color);
        table-stripe-bg-color: var(--table-stripe-bg-color);
        table-stripe-text-color: var(--table-stripe-text-color);
        color-primary: var(--color-primary);
        color-success: var(--color-success);
        color-warning: var(--color-warning);
        color-danger: var(--color-danger);
        color-info: var(--color-info);
        color-black: var(--color-black);
        color-white: var(--color-white);
        color-gray: var(--color-gray);
        color-light-gray: var(--color-light-gray);
        color-blue-auxiliary1: var(--color-blue-auxiliary1);
        color-blue-auxiliary2: var(--color-blue-auxiliary2);
        color-gray-auxiliary1: var(--color-gray-auxiliary1);
        color-gray-auxiliary2: var(--color-gray-auxiliary2);
        color-gray-auxiliary3: var(--color-gray-auxiliary3);
        color-light-black: var(--color-light-black);
        checkbox-border-color: var(--checkbox-border-color);
        checkbox-active-border-bg-color: var(--checkbox-active-border-bg-color);
        checkbox-active-disabled-border-bg-color: var(--checkbox-active-disabled-border-bg-color);
        checkbox-disabled-border-color: var(--checkbox-disabled-border-color);
        checkbox-disabled-bg-color: var(--checkbox-disabled-bg-color);
        checkbox-disabled-text-color: var(--checkbox-disabled-text-color);
        pagination-bg-color: var(--pagination-bg-color);
        pagination-text-color: var(--pagination-text-color);
        pagination-hover-bg-color: var(--pagination-hover-bg-color);
        pagination-active-bg-color: var(--pagination-active-bg-color);
        pagination-active-text-color: var(--pagination-active-text-color);
        pagination-switch-hover-color: var(--pagination-switch-hover-color);
        breadcrumb-text-color: var(--breadcrumb-text-color);
        breadcrumb-disabled-text-color: var(--breadcrumb-disabled-text-color);
        breadcrumb-hover-text-color: var(--breadcrumb-hover-text-color);
        input-border-color: var(--input-border-color);
        input-text-color: var(--input-text-color);
        input-focus-border-color: var(--input-focus-border-color);
        input-error-color: var(--input-error-color);
        input-placeholder:var(--input-placeholder);
        select-text-color: var(--select-text-color);
        select-border-color: var(--select-border-color);
        select-hover-border-color: var(--select-hover-border-color);
        select-content-hover-bg-color: var(--select-content-hover-bg-color);
        select-disabled-bg-color: var(--select-disabled-bg-color);
        select-tag-bg-color: var(--select-tag-bg-color);
        select-tag-text-color: var(--select-tag-text-color);
        button-cancel-border-color: var(--button-cancel-border-color);
        button-cancel-hover-color: var(--button-cancel-hover-color);
        button-cancel-hover-border-color: var(--button-cancel-hover-border-color);
        button-cancel-disabled-color: var(--button-cancel-disabled-color);
        button-cancel-color: var(--button-cancel-color);
        input-disabled-bg-color: var(--input-disabled-bg-color);
        button-link-hover-color: var(--button-link-hover-color);
        checkbox-text-color: var(--checkbox-text-color);
        border-hover-border-color: var(--border-hover-border-color);
        radio-active-border-color: var(--radio-active-border-color)
    }
}

:export {
    class-prefix: #{$class-prefix};
}

/*
    使用方法如下：
   .footer {
        background: var(#{$class-prefix}-foot-color);
        color: var(#{$class-prefix}-foot-text-color);
    }
*/
